let products = []
let bannerList = []
let productsList = []

// 引入公共头
$(function () {
    $('.header-common').load('../pages/header.html')
})
// 引入公共脚
$(function () {
    $('.footer-common').load('../pages/footer.html')
})

/**
 * 去9.9
 */
 function toNine(){
    $('.nav>li:nth-child(2)').click(function(){
        location.href = 'nineNine.html'
    })
}
toNine()

/**
 * 初始化swiper插件代码，必须放到模板数据加载完成html节点显示完成之后
 * @param {*} bannerList 
 */
function SwiperShow(bannerList) {
    if (bannerList.lenght == 0) {
        let bannerItem = `
        <div class="swiper-slide">
            <img src="../static/image/首页图.jpeg" alt="">
        </div>
        `
        $('.swiper-wrapper').html(bannerItem)
    }
    new Swiper('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }

    })
}


/**
 * 获取首页数据
 */
function bannerInfo() {
    $.ajax({
        type: "get",
        url: "https://www.xiongmaoyouxuan.com/api/tab/1?start=0",
        headers: {
            'x-platform': 'pc',
        },
        success: function (data) {
            if (data.code = 200) {
                products = data.data.items.list
                bannerList = data.data.banners

                bannersList(bannerList)
                SwiperShow(bannerList)
                HomePageFive(data)
                hotList(products)
                // clickProduct(products)
                // console.log('获取成功', data)
            } else {
                console.log('出现错误', data)
            }
        }
    })
}
bannerInfo()

/**
 * 显示轮播图内容
 * @param {*} bannerList 
 */
function bannersList(bannerList) {
    let data = {
        productList: bannerList
    }
    let bannerHtml = template('template_banner', data)
    $('.temp_banner').html(bannerHtml)
}
/**
 * 显示商品列表
 */
 function hotList(list) {
    let str = ''
    productsList =[
        ...productsList,
        ...list
    ]
    productsList.forEach(item => {
        str += `
        <div class="product" index="${item.id}">
            <img src="${item.image}" alt="商品图" class="pro_img">
            <div class="details">
                <div class="pr_desc">${item.title}</div>
                <div class="pr_plat">
                    <div class="operator">${item.platform == 2 ? "淘宝" : "天猫"}</div>
                    <p>${item.type == 1 ? "包邮" : "不包邮"}</p>
                </div>
                <div class="pr_discount">
                    <span class="price">￥<span class="point"><span class="int">${parseInt(item.price)}</span>.${cutStr(item.price.toString())}</span><span
                            class="buy">${item.saleNum}人已买</span></span>
                    <div class="ticket">${item.couponValue}</div>
                </div>
            </div>
        </div>
            `
    })
    $('.index_content').html(str)

}

/**
 * 首页五宫格的动态数据显示
 */
function HomePageFive(data) {
    let content = data.data.gridsV2
    // 9.9包邮动图
    let nineGif = content[0].imageUrl
    let ninetittle = content[0].title
    let nineWord = content[0].word
    $('.nine_img').attr('src', nineGif)
    $('.nine>h3').html(ninetittle)
    $('.nine_tittle').html(nineWord)

    // 一宫格
    let img1 = content[2].imageUrl
    let tittle1 = content[2].title
    let word1 = content[2].word
    $('.clothes_img').attr('src', img1)
    $('.clothes>h3').html(tittle1)
    $('.clothes p').html(word1)

    // 二宫格
    let img2 = content[1].imageUrl
    let tittle2 = content[1].title
    let word2 = content[1].text
    $('.discount_img').attr('src', img2)
    $('.discount>h3').html(tittle2)
    $('.discount>p').html(word2)
}

/**
 * 点击获得更多商品信息
 */
function moreList() {
    let pageNo = 0
    $('.more_btn').click(function () {
        pageNo++
        console.log(pageNo)
        $.ajax({
            type: "get",
            url: "https://www.xiongmaoyouxuan.com/api/tab/1/feeds",
            headers: { 'x-platform': 'pc' },
            data: {
                start: pageNo * 20
            },
            success: function (data) {
                if (data.code = 200) {
                    products = data.data.list 

                    console.log('products获取：',products)
                    hotList(products)
                    // console.log('获取成功', data)
                } else {
                    console.log('出现错误', data)
                }
            }
        })
    })
}
moreList()


/**
 * 取价格的小数部分
 * @param {} str 
 * @returns 
 */
function cutStr(str) {
    let newArr = str.split('.')
    return newArr[1]
}

/**
 *监听 查看商品详情 点击事件 获取商品详情
 */
function clickProduct() {
    $('.index_content').on('click', '.product', function () {
        let id = $(this).attr('index')
        // let index = products.findIndex(item => item.id == id)
        $.ajax({
            type: "get",
            url: "http://www.xiongmaoyouxuan.com/api/detail",
            data: {
                id,
            },
            headers: {
                'x-platform': 'pc',
            },
            success: function (data) {
                if (data.code = 200) {
                    // let product = data.data.detail.descContentList
                    localStorage.setItem('product', JSON.stringify(data))
                    location.href = './productDetails.html'
                    // console.log('商品详情', product)

                    // console.log('详情获取成功', data)
                } else {
                    console.log('详情获取出现错误', data)
                }
            }
        })
        // localStorage.setItem('product', JSON.stringify(products[index]))
        // location.href = './productDetails.html'
    })
}
clickProduct()



/**
 * 返回顶部
 */
window.onscroll = function () {
    toTop()
}
function toTop() {
    if (document.body.scrollTop >= 600 || document.documentElement.scrollTop >= 600) {
        $('.toTop').css('display', 'block')
    } else if (document.body.scrollTop < 600 || document.documentElement.scrollTop < 600) {
        $('.toTop').css('display', 'none')
    }

    $('.toTop').click(function () {
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
    })
}
